<?php

/**
 * Debug Bar screen template.
 *
 * It uses Silk Icons created by Mark James and released under Creative Commons Attribution 2.5 License.
 *
 * This file is part of the Nette Framework (http://nette.org)
 * Copyright (c) 2004, 2010 David Grudl (http://davidgrudl.com)
 *
 * @param      array     $panels
 * @return     void
 */

namespace Nette\Diagnostics;

use Nette;

?>




<!-- Nette Debug Bar -->

<?php ob_start() ?>
&nbsp;

<style id="nette-debug-style" class="nette">

	/* common styles */
	#nette-debug {
		display: none;
		position: fixed;
	}

	body#nette-debug {
		margin: 5px 5px 0;
		display: block;
	}

	#nette-debug * {
		font: inherit;
		color: inherit;
		background: transparent;
		margin: 0;
		padding: 0;
		border: none;
		text-align: inherit;
		list-style: inherit;
	}

	#nette-debug .nette-fixed-coords {
		position: fixed;
		_position: absolute;
		right: 0;
		bottom: 0;
		max-width: 100%;
	}

	#nette-debug a {
		color: #125EAE;
		text-decoration: none;
	}

	#nette-debug .nette-panel a {
		color: #125EAE;
		text-decoration: none;
	}

	#nette-debug a:hover, #nette-debug a:active, #nette-debug a:focus {
		background-color: #125EAE;
		color: white;
	}

	#nette-debug .nette-panel h2, #nette-debug .nette-panel h3, #nette-debug .nette-panel p {
		margin: .4em 0;
	}

	#nette-debug .nette-panel table {
		border-collapse: collapse;
		background: #FDF5CE;
	}

	#nette-debug .nette-panel tr:nth-child(2n) td {
		background: #F7F0CB;
	}

	#nette-debug .nette-panel td, #nette-debug .nette-panel th {
		border: 1px solid #E6DFBF;
		padding: 2px 5px;
		vertical-align: top;
		text-align: left;
	}

	#nette-debug .nette-panel th {
		background: #F4F3F1;
		color: #655E5E;
		font-size: 90%;
		font-weight: bold;
	}

	#nette-debug .nette-panel pre, #nette-debug .nette-panel code {
		font: 9pt/1.5 Consolas, monospace;
	}

	#nette-debug table .nette-right {
		text-align: right;
	}

	.nette-hidden, .nette-collapsed {
		display: none;
	}



	/* bar */
	#nette-debug-bar {
		font: normal normal 12px/21px Tahoma, sans-serif;
		color: #333;
		border: 1px solid #c9c9c9;
		background: #EDEAE0 url('') top;
		position: relative;
		overflow: auto;
		min-height: 21px;
		_float: left;

		min-width: 50px;
		white-space: nowrap;

		z-index: 23181;
		opacity: .9;

		border-radius: 3px;
		-moz-border-radius: 3px;
		box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
		-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
		-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
	}

	#nette-debug-bar:hover {
		opacity: 1;
	}

	#nette-debug-bar ul {
		list-style: none none;
		margin-left: 4px;
	}

	#nette-debug-bar li {
		float: left;
	}

	#nette-debug-bar img {
		vertical-align: middle;
		position: relative;
		top: -1px;
		margin-right: 3px;
	}

	#nette-debug-bar li a {
		color: #000;
		display: block;
		padding: 0 4px;
	}

	#nette-debug-bar li a:hover {
		color: black;
		background: #c3c1b8;
	}

	#nette-debug-bar li .nette-warning {
		color: #D32B2B;
		font-weight: bold;
	}

	#nette-debug-bar li > span {
		padding: 0 4px;
	}

	#nette-debug-logo {
		background: url('') 0 50% no-repeat;
		min-width: 45px;
		cursor: move;
	}

	#nette-debug-logo span {
		display: none;
	}

	#nette-debug-bar-bgl, #nette-debug-bar-bgx, #nette-debug-bar-bgr {
		position: absolute;
		z-index: -1;
		top: -7px;
		height: 37px;
	}


	/* panels */
	#nette-debug .nette-panel {
		font: normal normal 12px/1.5 sans-serif;
		background: white;
		color: #333;
	}

	#nette-debug h1 {
		font: normal normal 23px/1.4 Tahoma, sans-serif;
		color: #575753;
		background: #EDEAE0;
		margin: -5px -5px 5px;
		padding: 0 25px 5px 5px;
	}

	#nette-debug .nette-mode-peek .nette-inner, #nette-debug .nette-mode-float .nette-inner {
		max-width: 700px;
		max-height: 500px;
		overflow: auto;
	}

	#nette-debug .nette-panel .nette-icons {
		display: none;
	}

	#nette-debug .nette-mode-peek {
		display: none;
		position: relative;
		z-index: 23180;
		padding: 5px;
		min-width: 150px;
		min-height: 50px;
		border: 5px solid #EDEAE0;
		border-radius: 5px;
		-moz-border-radius: 5px;
	}

	#nette-debug .nette-mode-peek h1 {
		cursor: move;
	}

	#nette-debug .nette-mode-float {
		position: relative;
		z-index: 23179;
		padding: 5px;
		min-width: 150px;
		min-height: 50px;
		border: 5px solid #EDEAE0;
		border-radius: 5px;
		-moz-border-radius: 5px;
		opacity: .9;
		box-shadow: 1px 1px 6px #666;
		-moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, .45);
		-webkit-box-shadow: 1px 1px 6px #666;
	}

	#nette-debug .nette-focused {
		z-index: 23180;
		opacity: 1;
	}

	#nette-debug .nette-mode-float h1 {
		cursor: move;
	}

	#nette-debug .nette-mode-float .nette-icons {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 18px;
	}

	#nette-debug .nette-icons a {
		color: #575753;
	}

	#nette-debug .nette-icons a:hover {
		color: white;
	}


	/* dump() */
	pre.nette-dump {
		color: #444; background: white;
	}
	pre.nette-dump .php-array, pre.nette-dump .php-object {
		color: #C22;
	}
	pre.nette-dump .php-string {
		color: #080;
	}
	pre.nette-dump .php-int, pre.nette-dump .php-float {
		color: #37D;
	}
	pre.nette-dump .php-null, pre.nette-dump .php-bool {
		color: black;
	}
	pre.nette-dump .php-visibility {
		font-size: 85%; color: #999;
	}
</style>

<!--[if lt IE 8]><style class="nette">
	#nette-debug-bar img { display: none }
	#nette-debug-bar li { border-left: 1px solid #DCD7C8; padding: 0 3px }
	#nette-debug-logo span { background: #edeae0; display: inline }
</style><![endif]-->


<script id="nette-debug-script">
/* <![CDATA[ */
<?php require __DIR__ . '/netteQ.js' ?>


(function(){
Nette.Debug = {};

var $ = Nette.Q.factory;

var Panel = Nette.Debug.Panel = Nette.Class({
	Extends: Nette.Q,

	Static: {
		PEEK: 'nette-mode-peek',
		FLOAT: 'nette-mode-float',
		WINDOW: 'nette-mode-window',
		FOCUSED: 'nette-focused',

		factory: function(selector) {
			return new Panel(selector)
		},

		_toggle: function(link) {
			var rel = link.rel, el = rel.charAt(0) === '#' ? $(rel) : $(link)[rel === 'prev' ? 'prev' : 'next'](rel.substring(4));
			if (el.css('display') === 'none') {
				el.show(); link.innerHTML = link.innerHTML.replace("\u25ba", "\u25bc");
			} else {
				el.hide(); link.innerHTML = link.innerHTML.replace("\u25bc", "\u25ba");
			}
		}
	},

	constructor: function(id) {
		Nette.Q.call(this, '#nette-debug-panel-' + id.replace('nette-debug-panel-', ''));
	},

	reposition: function() {
		if (this.hasClass(Panel.WINDOW)) {
			window.resizeBy(document.documentElement.scrollWidth - document.documentElement.clientWidth, document.documentElement.scrollHeight - document.documentElement.clientHeight);
		} else {
			this.position(this.position());
			if (this.position().width) { // is visible?
				document.cookie = this.dom().id + '=' + this.position().left + ':' + this.position().top + '; path=/';
			}
		}
	},

	focus: function() {
		if (this.hasClass(Panel.WINDOW)) {
			this.data().win.focus();
		} else {
			clearTimeout(this.data().blurTimeout);
			this.addClass(Panel.FOCUSED).show();
		}
	},

	blur: function() {
		this.removeClass(Panel.FOCUSED);
		if (this.hasClass(Panel.PEEK)) {
			var panel = this;
			this.data().blurTimeout = setTimeout(function() {
				panel.hide();
			}, 50);
		}
	},

	toFloat: function() {
		this.removeClass(Panel.WINDOW).removeClass(Panel.PEEK).addClass(Panel.FLOAT).show().reposition();
		return this;
	},

	toPeek: function() {
		this.removeClass(Panel.WINDOW).removeClass(Panel.FLOAT).addClass(Panel.PEEK).hide();
		document.cookie = this.dom().id + '=; path=/'; // delete position
	},

	toWindow: function() {
		var panel = this, win, doc, offset = this.offset(), id = this.dom().id;

		offset.left += typeof window.screenLeft === 'number' ? window.screenLeft : (window.screenX + 10);
		offset.top += typeof window.screenTop === 'number' ? window.screenTop : (window.screenY + 50);

		win = window.open('', id.replace(/-/g, '_'), 'left='+offset.left+',top='+offset.top+',width='+offset.width+',height='+(offset.height+15)+',resizable=yes,scrollbars=yes');
		if (!win) return;

		doc = win.document;
		doc.write('<!DOCTYPE html><meta http-equiv="Content-Type" content="text\/html; charset=utf-8"><style>' + $('#nette-debug-style').dom().innerHTML + '<\/style><script>' + $('#nette-debug-script').dom().innerHTML + '<\/script><body id="nette-debug">');
		doc.body.innerHTML = '<div class="nette-panel nette-mode-window" id="' + id + '">' + this.dom().innerHTML + '<\/div>';
		win.Nette.Debug.Panel.factory(id).initToggler().reposition();
		doc.title = panel.find('h1').dom().innerHTML;

		$([win]).bind('unload', function() {
			panel.toPeek();
			win.close(); // forces closing, can be invoked by F5
		});

		$(doc).bind('keyup', function(e) {
			if (e.keyCode === 27 && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) win.close();
		});

		document.cookie = id + '=window; path=/'; // save position
		this.hide().removeClass(Panel.FLOAT).removeClass(Panel.PEEK).addClass(Panel.WINDOW).data().win = win;
	},

	init: function() {
		var panel = this, pos;

		panel.data().onmove = function(coords) { // forces constrained inside window
			var d = document, width = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth, height = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
			coords.left = Math.max(Math.min(coords.left, .8 * this.offsetWidth), .2 * this.offsetWidth - width);
			coords.top = Math.max(Math.min(coords.top, .8 * this.offsetHeight), this.offsetHeight - height);
		};

		$(window).bind('resize', function() {
			panel.reposition();
		});

		panel.draggable({
			handle: panel.find('h1'),
			stop: function() {
				panel.toFloat();
			}

		}).bind('mouseenter', function(e) {
			panel.focus();

		}).bind('mouseleave', function(e) {
			panel.blur();
		});

		this.initToggler();

		panel.find('.nette-icons').find('a').bind('click', function(e) {
			if (this.rel === 'close') panel.toPeek(); else panel.toWindow();
			e.preventDefault();
		});

		// restore saved position
		if (pos = document.cookie.match(new RegExp(panel.dom().id + '=(window|(-?[0-9]+):(-?[0-9]+))'))) {
			if (pos[2]) {
				panel.toFloat().position({left: pos[2], top: pos[3]});
			} else {
				panel.toWindow();
			}
		} else {
			panel.addClass(Panel.PEEK);
		}
	},

	initToggler: function() { // enable <a rel="..."> togglers
		var panel = this;
		this.bind('click', function(e) {
			var $link = $(e.target).closest('a'), link = $link.dom();
			if (link && link.rel) {
				Panel._toggle(link);
				e.preventDefault();
				panel.reposition();
			}
		});
		return this;
	}

});



Nette.Debug.Bar = Nette.Class({
	Extends: Nette.Q,

	constructor: function() {
		Nette.Q.call(this, '#nette-debug-bar');
	},

	init: function() {
		var bar = this, pos;

		bar.data().onmove = function(coords) { // forces constrained inside window
			var d = document, width = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth, height = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
			coords.left = Math.max(Math.min(coords.left, 0), this.offsetWidth - width);
			coords.top = Math.max(Math.min(coords.top, 0), this.offsetHeight - height);
		};

		$(window).bind('resize', function() {
			bar.position(bar.position());
		});

		bar.draggable({
			draggedClass: 'nette-dragged',
			stop: function() {
				document.cookie = bar.dom().id + '=' + bar.position().left + ':' + bar.position().top + '; path=/';
			}
		});

		bar.find('a').bind('click', function(e) {
			if (this.rel === 'close') {
				$('#nette-debug').hide();
				if (window.opera) $('body').show();

			} else if (this.rel) {
				var panel = Panel.factory(this.rel);
				if (e.shiftKey) {
					panel.toFloat().toWindow();
				} else if (panel.hasClass(Panel.FLOAT)) {
					var offset = $(this).offset();
					panel.offset({left: offset.left - panel.position().width + offset.width + 4, top: offset.top - panel.position().height - 4}).toPeek();
				} else {
					panel.toFloat().position({left: panel.position().left - Math.round(Math.random() * 100) - 20, top: panel.position().top - Math.round(Math.random() * 100) - 20}).reposition();
				}
			}
			e.preventDefault();

		}).bind('mouseenter', function(e) {
			if (!this.rel || this.rel === 'close' || bar.hasClass('nette-dragged')) return;
			var panel = Panel.factory(this.rel);
			panel.focus();
			if (panel.hasClass(Panel.PEEK)) {
				var offset = $(this).offset();
				panel.offset({left: offset.left - panel.position().width + offset.width + 4, top: offset.top - panel.position().height - 4});
			}

		}).bind('mouseleave', function(e) {
			if (!this.rel || this.rel === 'close' || bar.hasClass('nette-dragged')) return;
			Panel.factory(this.rel).blur();
		});

		// restore saved position
		if (pos = document.cookie.match(new RegExp(bar.dom().id + '=(-?[0-9]+):(-?[0-9]+)'))) {
			bar.position({left: pos[1], top: pos[2]}); // TODO
		}

		bar.find('a').each(function() {
			if (!this.rel || this.rel === 'close') return;
			Panel.factory(this.rel).init();
		});
	}

});


})();

/* ]]> */
</script>


<?php foreach ($panels as $id => $panel): if (!$panel['panel']) continue; ?>
<div class="nette-fixed-coords">
	<div class="nette-panel" id="nette-debug-panel-<?php echo $panel['id'] ?>">
		<?php echo $panel['panel'] ?>
		<div class="nette-icons">
			<a href="#" title="open in window">&curren;</a>
			<a href="#" rel="close" title="close window">&times;</a>
		</div>
	</div>
</div>
<?php endforeach ?>

<div class="nette-fixed-coords">
	<div id="nette-debug-bar">
		<ul>
			<li id="nette-debug-logo" title="PHP <?php echo htmlSpecialChars(PHP_VERSION . " |\n"
			. (isset($_SERVER['SERVER_SOFTWARE']) ? $_SERVER['SERVER_SOFTWARE'] . " |\n" : '')
			. (class_exists('Nette\Framework') ? 'Nette Framework ' . Nette\Framework::VERSION . ' (' . substr(Nette\Framework::REVISION, 8) . ')' : '')) ?>">&nbsp;<span>Nette Framework</span></li>
			<?php foreach ($panels as $panel): if (!$panel['tab']) continue; ?>
			<li><?php if ($panel['panel']): ?><a href="#" rel="<?php echo $panel['id'] ?>"><?php echo trim($panel['tab']) ?></a><?php else: echo '<span>', trim($panel['tab']), '</span>'; endif ?></li>
			<?php endforeach ?>
			<li><a href="#" rel="close" title="close debug bar">&times;</a></li>
		</ul>
	</div>
</div>
<?php $output = ob_get_clean(); ?>


<div id="nette-debug"></div>

<script>
(function (onloadOrig) {
	window.onload = function() {
		if (typeof onloadOrig === 'function') onloadOrig();
		var debug = document.getElementById('nette-debug');
		document.body.appendChild(debug);
		debug.innerHTML = <?php echo json_encode(Nette\Utils\Strings::fixEncoding($output)) ?>;
		for (var i = 0, scripts = debug.getElementsByTagName('script'); i < scripts.length; i++) eval(scripts[i].innerHTML);
		(new Nette.Debug.Bar).init();
		Nette.Q.factory(debug).show();
	};
})(window.onload);
</script>

<!-- /Nette Debug Bar -->
